<template>
  <div class="app">
    <el-container>
      <el-header>
        <div class="report_header">
          <div class="report_header_left"></div>

          <div style="display:flex;width: 100%;justify-content: space-between;">
            <div  style="display:flex;width:500px;margin-top:5px">

          <div class="report_header_date">
            <el-date-picker
              style="width: 100%"
              v-model="date"
              value-format="yyyy-MM-dd"
              type="daterange"
              align="right"
              unlink-panels
              @change="changeTime"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
              <div class="report_header_query">
            <el-select  v-model="query.shopId" clearable placeholder="请选择门店"
                        @focus="getShop">
              <el-option v-for="item in shopIdOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>

            </div>

           <div>
          <el-button  style="margin-top: 6px;" size="small" type="primary"  @click="loadData">查询 </el-button>
          <ExportList2Excel style='margin-top: 5px;margin-left:20px' ref="exportList2Excel" @handleExport="handleExport"  name="导出" />
           </div>

          </div>
        </div>
      </el-header>
      <el-main>
        <el-table
          :height="curHeight"
          :data="tableData"
          border
          ref="table"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="items"
            align="left"
            label="项目"
            width="250"
           header-align='center'
           >
          </el-table-column>
          <el-table-column
            prop="income"
            align="right"
            label="收入"
            header-align='center'
           >
          </el-table-column>
          <el-table-column
            prop="expenditure"
            align="right"
            label="支出"
            header-align='center'
           >
          </el-table-column>
          <el-table-column
            prop="wxReceived"
            align="right"
            label="微信"
            header-align='center'
           >
          </el-table-column>
          <el-table-column
            prop="aliReceived"
            align="right"
            header-align='center'

            label="支付宝">
          </el-table-column>
          <el-table-column
            prop="memCardReceived"
            align="right"
            header-align='center'
            label="会员卡"
            >
          </el-table-column>
          <el-table-column
            prop="cashReceived"
            label="现金"
            align="right"
            header-align='center'
            >
          </el-table-column>
          <el-table-column
            prop="bankReceived"
            align="right"
            header-align='center'

            label="转账">
          </el-table-column>
          <el-table-column
            prop="balanceReceived"
            align="right"
            header-align='center'

            label="钱包">
          </el-table-column>
          <el-table-column
            prop="waterTicketReceived"
            label="电子水票"
            header-align='center'
            align="right"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="paperReceived"
            label="纸质水票"
            header-align='center'
            align="right"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="pointReceived"
            label="红包"
            header-align='center'
            align="right"
         >
          </el-table-column>
          <el-table-column
            prop="matchPointReceived"
            align="right"
            header-align='center'
            label="购物券">
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <div class="report_footer_box">
          <pagination style="margin-left: 10px" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                      @pagination="loadData"></pagination>
        </div>
      </el-footer>
    </el-container>
    <category-dialog ref="categoryDialog" request="productCategory" @confirm="categoryDialogConfirm" />
  </div>
</template>

<script>
  import queryOffice from '@/components/Query/queryOffice'
  import elDragDialog from '@/directive/el-drag-dialog'
  import { list as officeList} from '@/api/sysOffice'
  import queryProductCategory from '@/components/Query/queryProductCategory'
  import { list as shopList } from '@/api/shop'
  import ExportList2Excel from "@/components/ExportList2Excel";
  import Pagination from '@/components/Pagination';
  import OfficeDialog from '@/components/OfficeDialog/index'
  import CategoryDialog from '@/components/CategoryDialog/index'
  import {list,summary} from '@/api/businessSummary'
  import utils from '@/utils/utils'
  import { exportReport } from '@/api/report'

  import { dateFormatter } from '@/filters'
  export default {
    name: 'businessSummary-list',
    data(){
      return{
        printing:10000,//打印数量设置
        productCategoryName:'',
        supplierName:'',

        query: {
          shopId:'',
          productCategory:'',
          officeId:'',
          endDate:'',
          beginDate:'',
        },
        fullscreenLoading:false,
        weChatPay:0,
        aliPay:0,
        memberPay:0,
        cashPay:0,
        bankPay:0,
        waterPay:0,
        pointPay:0,
        matchPointPay:0,
        reportListId:'',
        date:[],
        shopIdOptions:[],
        officeName:'',
        pickerOptions: {//时间快捷选择
          shortcuts: [{
            text: '昨天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        tableData: [],
        curHeight:null,
        pageSize: 20,
        total: 0,
        pageNum: 1,
      }
    },
    directives: {elDragDialog},
    components:{
      Pagination,OfficeDialog,CategoryDialog,ExportList2Excel,queryOffice,queryProductCategory
    },
    updated() {

      this.$nextTick(() => {
        this.$refs['table'].doLayout();
      })
      document.getElementsByClassName("el-table_1_column_2").colspan = 2;
    },
    created() {
      this.getShop()
    },
    mounted() {
      this.comeIn();
      this.beforeMount();
    },
    methods:{
      queryProductCategoryClick(data){
        this.query.productCategory=data.productCategoryId
      },
      claerName(){
        this.query.productCategoryId=''
      },
      queryOfficeClick(data){
        this.query.officeId=data.officeId
      },
      //下载模板的函数
      handleExport() {
        let _this= this
        var  loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        //要导出函数携带的参数
        //要导出函数携带的参数
        let data ={}
        data.tHeader = ["项目","微信","支付宝","会员卡","现金","转账","钱包","电子水票","纸质水票",'红包',"购物券"]
        data.filterVal = ["items","wxReceived","aliReceived","memCardReceived","cashReceived","bankReceived","balanceReceived","waterTicketReceived","paperReceived",'pointReceived',"matchPointReceived"]
        data.filename = "营业汇总表";
        var  param=new URLSearchParams()
        param.append('endDate',this.query.endDate)
        param.append('startDate',this.query.beginDate)
        param.append('shopId',this.query.shopId)
        param.append('pageSize',this.pageSize)
        param.append('pageNum',this.printing)
        list(param).then(res=>{
          data.list=res.data.data

          _this.$refs.exportList2Excel.handleDownload(data);
          loading.close();

          if(data.list.length==this.printing){
            this.pageNum++
             console.log(this.pageNum);
             this.handleExport()
          }
          else{
            return;
          }
        }).catch(error=>{
          _this.$refs.exportList2Excel.unlockLoading()
          loading.close();
          console.log('error!!')
        })
        _this.$refs.exportList2Excel.handleDownload(data);
      },
      loadData(){
        var  param=new URLSearchParams()
        param.append('endDate',this.query.endDate)
        param.append('startDate',this.query.beginDate)
        param.append('shopId',this.query.shopId)
        param.append('pageSize',this.pageSize)
        param.append('pageNum',this.pageNum)
        // param.append('productCategoryId',this.query.productCategory)
        // param.append('officeId',this.query.officeId)
        list(param).then(res=>{
          res.data.data.forEach(item=>{
            if (item.matchPointReceived==null){
              item.matchPointReceived=0
            }
          })
          this.tableData=res.data.data
          this.total=res.data.total
        })
      },

      categoryDialogConfirm(val) {
        console.log(val)
        this.query.productCategory=val.id
        this.productCategoryName=val.name
      },

      categoryDialogShow() {
        this.$refs.categoryDialog.show()
      },
      officeDialogShow() {
        this.$refs.officeDialog.show()
      },
      getShop () { // 获取仓库
        shopList().then(res => {
          res.data.data.forEach((option, index) => {
            const obj = {
              value: option.id,
              label: option.name
            }
            this.$set(this.shopIdOptions, index, obj)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      changeTime(data){
        if (data!=null&&data.length>1){
          this.query.beginDate=data[0]
          this.query.endDate=data[1]
        }else{
          this.query.endDate=''
          this.query.beginDate=''
        }
      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            var h = document.documentElement.clientHeight || document.body.clientHeight;
            _this.curHeight = h - 224//减去页面上固定高度height
          })();
        };
      },
      comeIn() {
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 224//减去页面上固定高度height
      },

    },
  }
</script>

<style scoped>
  /*.el-table{*/

  /*}*/
  /*/deep/.el-table__header-wrapper{*/
  /*  overflow:visible !important;*/
  /*}*/
  /*.el-card__body {*/
  /*  padding: 20px 20px 50px 20px;*/
  /*}*/
  /deep/.el-table_1_column_2{

  }
  .report_header{
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    background-color: white;
    display: flex;
    align-items: center;
  }
  /deep/.el-header{
    padding: 10px;
  }
  .report_header_left{
    width: 5px;
    height: 100%;
    background-color: #409EFF;
  }
  .report_header_date{
    box-sizing: border-box;
    margin-left: 10px;
    width: 260px;
  }
  .report_header_query{
    margin-left: 10px;
    width: 130px;
  }
  /deep/.el-main{
    padding: 10px;
    padding-bottom: 0;
  }
  /deep/.el-table--enable-row-transition .el-table__body td{
    border-bottom:none
  }
  /deep/.el-table--border th{
    background-color: rgba(241,242,243,1);
  }
  .report_footer_box{
    width: 100%;
    border: 1px solid #dfe6ec;
    border-top: none;
    height: 50px;
    justify-content: center;
    display: flex;
    align-items: center;
    background-color: white;
  }
  /deep/.el-footer{
    padding: 10px;
    padding-top: 0;
  }
  .report_footer_box_title{
    margin-left: 10px;
    font-size: 12px;
    font-weight: bold;
  }
  .elOption{
    background-color: #909399;
    color:white ;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 40px
  }
  /deep/.pagination-container{
    margin-top: 0 !important;
  }
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-table--group::after,
  .el-table--border::after,
  .el-table::before {
    background-color: white;
  }

  /deep/.el-table__body tbody .el-table__row:last-child {
    background-color: #F5F7FA;
  }

  /deep/.el-main {
    padding: 10px;
    padding-bottom: 0;
  }

  /deep/.el-table--enable-row-transition .el-table__body td {
    border-bottom: none;
  }

  /deep/.el-table::before {
    height: 0px;
  }

  /deep/.el-table--border th {
    background-color: rgba(241, 242, 243, 1);
  }

  /deep/.el-header {
    padding: 10px;
  }

  /deep/.pagination-container {
    margin-top: 0 !important;
  }
</style>
